<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="ltc-page">
        <svg style="position: absolute; width: 0; height: 0;">
        <filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="12"></feGaussianBlur>
        <feColorMatrix values="0 0 0 0 0 
                    0 0 0 0 0 
                    0 0 0 0 0 
                    0 0 0 48 -7"></feColorMatrix>
        </filter>
        </svg>

        <div class="loader"></div>
        <div class="font">404</div>
    </div>
</template>

<script>
export default {
created(){
  setTimeout(() => {
    this.$router.push('/')
  }, 3000);
}
}

</script>
<style scoped lang="scss">
.ltc-page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader {
  width: 20em;
  height: 10em;
  position: relative;
  overflow: hidden;
  border-bottom: 10px solid #000;
  filter: url(#goo);
  position: relative;
}
.font{
  position: absolute;
  font-size: 100px;
  color: #000;
  font-weight: bold;
  bottom: 40%;
}

.loader::before {
  content: '';
  width: 22em;
  height: 18em;
  background: #f00;
  position: absolute;
  border-radius: 50%;
  left: -2em;
  bottom: -18em;
  animation: wee1 2s linear infinite;
}

.loader::after {
  content: '';
  width: 16em;
  height: 12em;
  background: #0ff;
  position: absolute;
  border-radius: 50%;
  left: -4em;
  bottom: -12em;
  animation: wee2 2s linear infinite 0.75s;
}

@keyframes wee1 {
  0% {
    transform: translateX(-10em) rotate(0deg);
  }

  100% {
    transform: translateX(7em) rotate(180deg);
  }
}

@keyframes wee2 {
  0% {
    transform: translateX(-8em) rotate(0deg);
  }

  100% {
    transform: translateX(8em) rotate(180deg);
  }
}
</style>